import { createApp, nextTick } from 'vue'
import message from './index.vue'
type Fn = {
  (e: { text: string; type: 'success' | 'error' | 'warn' }): void
  success?: (e: string) => void
  error?: (e: string) => void
  warn?(e: string): void
}

export const Message: Fn = ({ text, type }) => {
  // 讲message组件的HTML渲染到body内
  // 1.通过createApp(组件)   2.通过mount渲染 mount(dom)
  const app = createApp(message, { text, type, remove })
  // createApp(组件，用于传递给组件的props参数，它是一个对象)
  // 创建一个标签，用于存储提示组件
  const div = document.createElement('div')
  // 给div加入一个calss熟悉
  div.setAttribute('class', 'hmMessage')
  document.body.append(div)
  app.mount(div)

  // 对提示组件做排序处理 .xtx-message
  // div 下的 .xtx-message 的dom，依次递增的控制
  // 1.先取所以的dom， 2.再处理div下的 .xtx-message的dom的css
  function sortDiv () {
    nextTick(() => {
      const divDom = document.querySelectorAll('.hmMessage')
      for (let i = 0; i < divDom.length; i++) {
        ;(divDom[i].querySelector(
          '.xtx-message'
        ) as HTMLElement).style.marginTop = i * 70 + 'px'
      }
    })
  }
  sortDiv()
  // 销毁 app.unmount()
  function remove () {
    app.unmount()
    document.body.removeChild(div)
    sortDiv()
  }
}

const arr: ('success' | 'error' | 'warn')[] = ['success', 'error', 'warn']
arr.forEach(item => {
  Message[item] = text => {
    Message({ text, type: item })
  }
})
